<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="curDialogVisible"
      :close-on-press-escape="false"
      width="550px"
      :style="{ heigh: '1000px' }"
      center
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form ref="editForm" :model="formValuesClone" :rules="formRules">
        <header style="font-weight: bold; margin-bottom: 12px">
          {{ bool?'销售要撤销本次回款单核账，确认完成本次审批？':'销售要撤销本次回款单核账，确认驳回此申请？' }}
        </header>
        <el-form-item label="审批说明：" prop="approveCommons">
          <el-input
            v-model="formValuesClone.approveCommons"
            type="textarea"
            maxlength="500"
            placeholder="请输入审批说明"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit">确认</el-button>
        <el-button @click="closeDialogVisible">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { throttle } from 'lodash'

export default {
  name: 'ApprovalDialog',
  components: {},
  props: {
    title: {
      type: String,
      default: ''
    },
    bool: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      formValuesClone: {},
      curDialogVisible: true,
      formRules: {
        approveCommons: [
          { required: !this.bool, message: '请输入审批说明', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    // 取消
    closeDialogVisible() {
      this.$emit('controlVisibleHandle', false)
    },
    // 保存
    onSubmit: throttle(
      function() {
        const { id, approveCommons } = this.formValuesClone
        this.$refs['editForm'].validate((bool) => {
          if (bool) {
            this.$emit('onSubmitQuery', {
              id,
              approveCommons,
              systemType: 'international'
            })
          } else {
            return false
          }
        })
      },
      2000,
      { leading: true, trailing: false }
    )
  }
}
</script>
<style scoped></style>
